import React, { useEffect, useState, useRef } from 'react'
import s from './style.module.less'
import MyIcon from '@/components/myIcon'
import { useNavigate } from 'react-router-dom'
import { ShareSheet, Button, Toast } from 'react-vant';
import View from "@/components/view";
import cx from 'classnames'
import SuspensionBtn from './SuspensionButton'
import { useStore, observer } from '@/store'
import axios from '@/utils/axios.js'
let dragableDiv
export default function Detail() {
    const { homeStore } = useStore()
    const { userStore } = useStore()
    let {houseInfo} = homeStore
    

    houseInfo = houseInfo.id ? houseInfo : JSON.parse(localStorage.getItem('houseInfo'))
    console.log(houseInfo,'houseInfo');
    const [seleted,setSelect] = useState(0)
    const [selectRim,setSelectRim] = useState(0)
    const [isLiked,setIsLiked] = useState(false)
    const options = [
        { name: '微信', icon: <MyIcon name='icon-weixin' fontSize='30px' /> },
        { name: '朋友圈', icon: <MyIcon name='icon-pengyouquan' fontSize='30px' /> },
        { name: '微博', icon: <MyIcon name='icon-weibo' fontSize='30px' /> },
    ]
    const describeArr = [
        {
            name:'有电梯'
        },
        {
            name:'民水民电'
        },
        {
            name:'集中供暖'
        },
    ]
    const Intros = [
        {
            id:0,
            name:'冰箱',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="4" width="28" height="36" rx="2" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round"/><path d="M9 22H37" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 20L9 24" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M37 20L37 24" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 29L15 33" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 11L15 15" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 40V44" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M13 40V44" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:1,
            name:'洗衣机',
            svg:<svg width="28" height="28" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8.77783" y="4" width="32" height="40" rx="2" stroke="#000000" stroke-width="4"/><path d="M8.77783 15.5H40.7778" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><circle cx="28.7778" cy="10" r="2" fill="#000000"/><circle cx="34.7778" cy="10" r="2" fill="#000000"/><circle cx="24.7778" cy="30" r="7" fill="#000000" stroke="#000000" stroke-width="4"/></svg>
        },
        {
            id:2,
            name:'热水器',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="24" rx="2" stroke="#000000" stroke-width="4"/><path d="M30 32L30 8" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 32L18 8" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 20L6 20" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 41V32" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M31 41H17" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:3,
            name:'空调',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="8" width="40" height="20" rx="2" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="12" y="20" width="24" height="8" fill="#000000" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 14H36" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 34V40" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 36V38" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 36V38" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:4,
            name:'天然气',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.1466 44C31.2933 44 40 43.0106 40 30.1802C40 23.9643 38.5085 18.9042 35.5256 15C32.7392 19.6667 30.674 22 29.3299 22C27.3139 22 29.3299 15.9107 26.9987 11.2914C25.4445 8.21194 22.6879 5.78146 18.7289 4C19.2794 8.43691 19.1603 11.6554 18.3715 13.6554C17.1882 16.6554 7.15114 21.91 8.05783 30.9349C8.96453 39.9599 15 44 23.1466 44Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-linejoin="round"/><path d="M21.7076 24.0083C17.9028 27.4666 16.2811 30.6674 16.8427 33.6109C17.3261 36.1448 19.2487 37.3764 20.6969 37.7735C21.8196 38.0814 23.7635 38.2536 25.5004 36.7067C27.3402 35.0682 26.6071 32.7388 23.9392 29.8571C22.8138 28.6415 22.0699 26.6919 21.7076 24.0083Z" fill="#FFF" stroke="#FFF" stroke-width="4" stroke-linejoin="round"/></svg>
        },
        {
            id:5,
            name:'暖气',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="6" width="38" height="8" rx="2" fill="none" stroke="#000000" stroke-width="4" stroke-linejoin="round"/><path d="M8 14V40C8 41.1046 8.89543 42 10 42H38C39.1046 42 40 41.1046 40 40V14" stroke="#000000" stroke-width="4" stroke-linejoin="round"/><path d="M31 29.0667C31 32.8958 27.866 36 24 36C20.134 36 17 32.8958 17 29.0667C17 25.2375 19.6923 23.7333 20.7692 20C25.0769 21.8666 25.0769 27.4667 25.0769 27.4667C25.0769 27.4667 26.1538 24.2667 29.3846 23.4667C29.6538 26.4 31 27.4316 31 29.0667Z" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:6,
            name:'床',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 12C8 10.3431 9.34315 9 11 9H37C38.6569 9 40 10.3431 40 12V23H8V12Z" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 35V39" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 35V39" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M29 18H19C17.3431 18 16 19.3431 16 21V23H32V21C32 19.3431 30.6569 18 29 18Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 26C4 24.3431 5.34315 23 7 23H41C42.6569 23 44 24.3431 44 26V35H4V26Z" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:7,
            name:'衣柜',
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 18H44V42H4V18Z" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 24H26" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 30H44" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 36H26" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 42V46" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M40 42V46" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M24 18V10" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M32 10C32 5.58172 28.4183 2 24 2C19.5817 2 16 5.58172 16 10H32Z" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M44 26V34" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 26V34" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        },
        {
            id:8,
            name:"电视",
            svg:<svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="14" width="38" height="28" rx="2" stroke="#000000" stroke-width="4"/><path d="M24 14L38 6" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M23 14L10 6" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M35 20L35 26" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="33" y="32" width="4" height="4" rx="2" fill="#000000"/></svg>
        }
    ]
    const [isDragging,  setIsDragging] = useState(false)
    const navigate = useNavigate()
    const [visible, setVisible] = useState(false)
    const [width, setWidth] = useState(350)
    const [isfull,setIsFull] = useState(false)
    const [startY,setStartY] = useState(0)
    const [currentY,setCurrentY] = useState(0)
    const goToHome = () => {
        navigate(-1)
    }
    const showShre = () => {
        setVisible(true)
    }
    function handleMouseDown(e) {
        e.preventDefault();
        console.log(e,'??????');
        setIsDragging(true)
        setStartY(e.clientY)
        dragableDiv = document.querySelector('#dragable')
        dragableDiv.addEventListener('mousemove', handleMouseMove)
        dragableDiv.addEventListener('mouseup', handleMouseUp)
    }
    function handleMouseMove(e) {
        console.log('move');
        const deltaY = e.clientY - startY;
        const newWidth = width + deltaY
        setWidth(newWidth)
        if (newWidth > 800) {
            setIsFull(true)
        }
    }
    function handleMouseUp(e) {
        console.log('up');
        setIsDragging(false)
        setStartY(0)
        setCurrentY(0)
        dragableDiv.removeEventListener('mousemove', handleMouseMove)
        dragableDiv.removeEventListener('mouseup', handleMouseUp)
        // do
    }
    const changeCallback = (index)=>{
        setSelect(index)
    }
    const getContent = () => {
        let dom 
        switch (seleted) {
            case 0:
                dom = <View />
                break;
            case 1:
                if (houseInfo) {
                    console.log(houseInfo.Housetype,'houseInfo.Housetype');
                    if (houseInfo.Housetype == '2-1') {
                        dom = <div><img style={{height:'350px',width:'100%'}} src="/HousetypeImg/2-1.jpg" alt="" /> </div>
                    }else if (houseInfo.Housetype == '3-2') {
                        dom = <div><img style={{height:'350px',width:'100%'}} src="/HousetypeImg/3-2.jpg" alt="" /> </div>
                    }else if(houseInfo.Housetype == '2-2'){
                        dom = <div><img style={{height:'350px',width:'100%'}} src="/HousetypeImg/2-2.jpg" alt="" /> </div>
                    }else {
                    dom = <div><img style={{height:'350px',width:'100%'}} src="/HousetypeImg/2-1.jpg" alt="" /> </div>
                    }
                }else {
                    dom = <div><img style={{height:'350px',width:'100%'}} src="/HousetypeImg/2-1.jpg" alt="" /> </div>
                }
                break;
            case 2:
                dom = <div>
                    <img style={{height:'350px',width:'100%'}} src={houseInfo?.img} alt="" /> 
                </div>
                break;
            case 3:
                dom = <div><img style={{height:'350px',width:'100'}} src='/HousetypeImg/小区.jpg' alt="" /> </div>
                break;
        }
        return dom
    }
    const getHouseType = (_str) => {
        let type = ''
        const arr = _str.split('-')
        for (let i = 0; i < arr.length; i++) {
            const element = arr[i];
            if (i == 0 && element!== '') {
                type += element + '室'
            }
            if (i == 1 && element!== '') {
                type += element + '厅'
            }
        }
        return type
    }
    const getIntros = (_str)=>{
        // 冰箱 洗衣机 热水器 空调 天然气 暖气 床 衣柜 电视
        const arr = _str.split('')
        return Intros.map((item,index)=>{
            return (
                <div className={s.introItem}>
                    <div>{item.svg}</div>
                    <div className='flex items-center mt-1'>{arr[index] ==1 ? <svg width="14" height="14" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 24L9 19L19 29L39 9L44 14L19 39L4 24Z" fill="#417505" stroke="#417505" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg> : <svg className='mr-1' width="14" height="14" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 11L11 6L24 19L37 6L42 11L29 24L42 37L37 42L24 29L11 42L6 37L19 24L6 11Z" fill="#d0021b" stroke="#d0021b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>}{item.name}</div>
                </div>
            )
        })
    }
    const getRimBtn = () => {
        const arr = [
            {
                id:0,
                title:'交通出行',
            },
            {
                id:1,
                title:'商场超市',
            },
            {
                id:2,
                title:'休闲娱乐'
            },
            {
                id:3,
                title:"教育医疗"
            }
        ]
        return (
            <>
            {
                arr.map((_item,index)=>{
                    return <div onClick={()=>{setSelectRim(index)}} className={selectRim === index ? s.active : s.unactive}>
                        {_item.title}
                        <div className={s.BottomTrim} style={{display:selectRim === index ? 'block' : 'none'}}>
                            
                        </div>
                    </div>
                })
            }
            </>

        )
    }
    const likeCallback = () => {
        console.log('房子的id',houseInfo.id);
        axios.post('user/like',{
            userId:userStore?.myId,
            houseId:houseInfo.id
        }).then((res)=>{
            if (res) {
                setIsLiked(!isLiked)
                Toast(!isLiked ? '已关注':'已取消关注')
            }
        })
    }
    const goToMessageContent = (agentId)=>{
        return function (params) {
            axios.get('/user').then((res)=>{
                if (res?.data?.list) {
                    res?.data?.list.forEach(element => {
                        if (element.id == agentId) {
                        navigate(`/messagecontent`,{
                            state:{
                            data:{
                                info:element
                            }
                            }
                            
                        })
                        }
                    });
                    console.log(res,'获取所有用户信息');
                }
            })

        }
    
      }
    // const isLiked = ()=>{
        
    // }
    useEffect(() => {
        axios.post('user/getOnelike',{
            userId:userStore?.myId
        }).then((res)=>{
            console.log(res,'res');
            if (res?.data?.data) {
                const likeArr = res?.data?.data
                if (likeArr.includes(houseInfo?.id)) {
                    setIsLiked(true)
                } else {
                    setIsLiked(false)
                }
            }
        })
    }, [])

    return (
        <div className={s.main}>
            <div className={s.topBar}>
            <div onClick={() => goToHome()} className={s.back}>
                 <svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31 36L19 24L31 12" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </div>
            <div className='flex justify-between w-24'>
                <div onClick={() => navigate('/message')} className={s.session}>
                    <svg width="28" height="28" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H44V36H29L24 41L19 36H4V6Z" fill="none" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/><path d="M23 21H25.0025" stroke="#ffffff" strokeWidth="4" strokeLinecap="round"/><path d="M33.001 21H34.9999" stroke="#ffffff" strokeWidth="4" strokeLinecap="round"/><path d="M13.001 21H14.9999" stroke="#ffffff" strokeWidth="4" strokeLinecap="round"/></svg>
                </div>
                <div onClick={() => showShre()} className={s.share}>
                    <svg width="26" height="26" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M42 38V42L6 42L6 38" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/><path d="M30 6L40 16L30 26" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/><path d="M40 16C20 16 6 19 6 32" stroke="#ffffff" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
            </div>
                <ShareSheet
                    visible={visible}
                    options={options}
                    title='立即分享给好友'
                    onCancel={() => setVisible(false)}
                    onSelect={(option, index) => {
                        console.log('option', option)
                        console.log('index', index)
                        setVisible(false)
                    }}
                />
            </div>
            <div style={{
                height: isfull ? '100vh' : `${width}px`
            }} className={cx({
                [s.viewContainer]: true
            })}>
            
            {getContent()}
            <SuspensionBtn changeCallback={changeCallback}></SuspensionBtn>
            </div>
            
            <div id='dragable' onMouseDown={handleMouseDown} className={s.content}>
                <div className={s.detail}>
                    <div className={s.box}>
                        <div className={s.num}><span style={{fontSize:'24px',fontWeight:'500'}}>{houseInfo?.rent}</span> 元/月 {`(${houseInfo?.Payment})`}</div>
                    </div>
                    <div className={s.box}>
                        <div className='flex justify-between mx-2.5 my-2'>
                            <div className='flex flex-col '>
                                <div className={s.bigText}>{getHouseType(houseInfo.Housetype)}</div>
                                <div className={s.smallText}>整租</div>
                            </div>
                            <div>
                                <div className={s.bigText}>{houseInfo.UsableArea}</div>
                                <div className={s.smallText}>建筑面积</div>
                            </div>
                            <div>
                                <div className={s.bigText}>{houseInfo.orientation}</div>
                                <div className={s.smallText}>朝向</div>
                            </div>
                            <div>
                                <div className={s.bigText}>{houseInfo.floor}层</div>
                                <div className={s.smallText}>楼层</div>
                            </div>
                        </div>
                    </div>
                    <div className={s.describeArr}>
                       {
                        describeArr.map((item)=>{
                            return (
                                <div className={s.describe}>{item.name}</div>
                            )
                        })
                       }
                    </div>
                </div>
                <div className={s.info}>
                    <div className='text-2xl'>
                        租住详情
                    </div>
                    <div className='flex items-center my-4'>
                        <div>
                        <div className='text-xl'>随时入住</div>
                        <div className={s.smallText1}>租期需咨询，一般下班后可看房</div>
                        </div>
                        <div className='ml-20 flex flex-col items-center border-solid border-gray-400 border p-2 rounded-xl '>
                            <div className='text-xl'>预约看房</div>
                            <div className={s.smallText}>灵活选择看房时间</div>
                        </div>
                    </div>
                    <div>
                       <div className='text-xl'>费用明细</div>
                       <div className='flex'>
                            <div className='mr-7 mt-4'>
                                <div className={s.smallText}>付款方式</div>
                                <div className='mt-4'>{houseInfo?.Payment}</div>
                            </div>
                            <div className='mr-7 mt-4'>
                                <div className={s.smallText}>租金</div>
                                <div className='mt-4'>{houseInfo?.rent}元/月</div>
                            </div>
                            <div className='mr-7 mt-4'>
                                 <div className={s.smallText}>中介费</div>
                                <div className='mt-4'>{houseInfo.Agencyfee}元</div>
                            </div>
                            <div className='mr-7 mt-4'>
                                <div className={s.smallText}>押金</div>
                                <div className='mt-4'>{houseInfo.Securitydeposit}元</div>
                            </div>

                       </div>
                       <div className='flex  mt-6'>
                        <div style={{width:'100%',}} className='flex justify-center h6 bg-zinc-100 py-2 rounded-3xl mb-3'>
                            咨询租金详情
                        </div>
                       </div>
                    </div>


                </div>
                <div className={s.intro}>
                    <div className='text-2xl mb-2'>房源简介</div>
                    <div style={{
                        overflow:'scroll'
                    }} className='flex mt-4 mb-4'>
                       {
                        getIntros(houseInfo.description)
                       }
                    </div>
                    <div className='flex'>
                        <div className='flex p-2 bg-zinc-50 mr-2 rounded-xl'>
                        <svg className='mr-2' width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 16V36H29L24 41L19 36H4V6H34" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M23 20H25.0025" stroke="#000000" stroke-width="4" stroke-linecap="round"/><path d="M33.001 20H34.9999" stroke="#000000" stroke-width="4" stroke-linecap="round"/><path d="M13.001 20H14.9999" stroke="#000000" stroke-width="4" stroke-linecap="round"/><circle cx="43" cy="7" r="3" fill="#000000"/></svg>
                            <div>
                                房子隔音效果好吗？
                            </div>
                        </div>
                        <div className='flex p-2 bg-zinc-50 rounded-xl'>
                        <svg className='mr-2' width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M44 16V36H29L24 41L19 36H4V6H34" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M23 20H25.0025" stroke="#000000" stroke-width="4" stroke-linecap="round"/><path d="M33.001 20H34.9999" stroke="#000000" stroke-width="4" stroke-linecap="round"/><path d="M13.001 20H14.9999" stroke="#000000" stroke-width="4" stroke-linecap="round"/><circle cx="43" cy="7" r="3" fill="#000000"/></svg>
                            <div>
                                卫生间厨房的水压大吗？
                            </div>
                        </div>
                    </div>
                </div>
                <div className={s.rim}>
                    <div className='flex justify-between'>
                        <div className='text-2xl mb-2'>
                            周边便利生活
                        </div>
                        <div onClick={()=>{navigate(`/rim?plotId=${houseInfo?.plotId}`)}} className='flex items-center'>
                            查看更多
                            <svg width="18" height="18" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12L31 24L19 36" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </div>
                    </div>
                    <div className='mapImg'>
                       <img src="/rimImg/国美.jpg" alt="" />
                    </div>
                    <div className='flex text-xl justify-between mt-2'>
                        {
                            getRimBtn()
                        }
                       
                    </div>
                </div>
            </div>
            <div className={s.botton}>
                <div onClick={likeCallback} className={s.left}>
                    <div>
                    {
                        isLiked ? <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z" fill="#fc0523" stroke="#fc0523" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg> :<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    } 
                    </div>
                    <div>
                        {
                            isLiked ? '已关注' : '关注'
                        }
                    </div>
                </div>
                <div className={s.right}>
                    <div className={s.phone}>
                    电话联系
                    </div>
                    <div onClick={goToMessageContent(houseInfo?.agentId)} className={s.online}>
                    在线咨询
                    </div>
                </div>
            </div>
        </div>
    )
}
